<template>
  <div class="user_right">
    <div class="userpage">
      <h3>个人资料</h3>
      <div class="userinfo_content">
        <div class="info_bar">
          <div class="userinfo_L">头像</div>
          <div class="userinfo_R">
            <img class="userImage" v-if="personalData && personalData.avatar" :src="photoUrl" />
            <div class="change changeHanld" @click="photoShow = true">更换</div>
            <el-dialog
              :visible.sync="photoShow"
              :show-close="true"
              width="350px"
              center
              title="头像上传"
              :close-on-click-modal="false"
            >
              <changeImg @isloading="controlImg" @refreshAvatar="setAvatar" :photoUrl="photoUrl" />
            </el-dialog>
          </div>
        </div>
        <div class="info_bar">
          <div class="userinfo_L">用户名</div>
          <div class="userinfo_R">
            <span>{{ personalData.nickName }}</span>
            <img
              class="changeHanld"
              src="../../../../static/image/userInfo/userEdit.png"
              alt
              @click="isShow = true"
            />
            <el-dialog
              :visible.sync="isShow"
              :show-close="true"
              width="30%"
              center
              title="修改昵称"
              :close-on-click-modal="false"
            >
              <editUser @isControlNick="showCintrolNick" :userNameitem="personalData.nickName" />
            </el-dialog>
          </div>
        </div>
        <div class="info_bar">
          <div class="userinfo_L">性别</div>
          <div class="userinfo_R" v-show="noDisplay">
            <el-radio-group v-model="radio" @change="getSex">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
            </el-radio-group>
          </div>
          <div class="changeSex">
            <span v-show="!noDisplay">
              {{
              ['保密', '男', '女'][personalData.sex]
              }}
            </span>
            <img
              class="changeHanld"
              src="../../../../static/image/userInfo/userEdit.png"
              alt
              @click="noDisplay = true"
            />
          </div>
        </div>
        <div class="info_bar">
          <div class="userinfo_L">身份</div>
          <div class="userinfo_R">
            <el-select
              v-model="value"
              :placeholder="personalData.identityType + ''"
              v-show="showIdentity"
              @change="changeOption(value)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <span v-if="personalData.identityType == 1" v-show="!showIdentity">企业主</span>
            <span v-if="personalData.identityType == 2" v-show="!showIdentity">服务机构</span>
            <span v-if="personalData.identityType == 3" v-show="!showIdentity">其他</span>
            <img
              class="changeHanld"
              src="../../../../static/image/userInfo/userEdit.png"
              alt
              @click="showIdentity = true"
              v-show="!showIdentity"
            />
          </div>
        </div>
        <div class="info_bar">
          <div class="userinfo_L">手机号码</div>
          <div class="userinfo_R">
            <span
              v-if="
                personalData.phoneNumber == null ||
                  personalData.phoneNumber == ''
              "
            >未绑定</span>
            <span v-else>{{ personalData.phoneNumber }}</span>
            <img
              class="changeHanld"
              src="../../../../static/image/userInfo/userEdit.png"
              alt
              @click="editmobile = true"
            />
            <el-dialog
              :visible.sync="editmobile"
              :show-close="true"
              width="400px"
              center
              title="修改手机号码"
              :close-on-click-modal="false"
            >
              <editmobile @isControlMobile="isMobileShow" :phoneItem="personalData.phoneNumber" />
            </el-dialog>
          </div>
        </div>
        <div class="info_bar">
          <div class="userinfo_L">微信</div>
          <div class="userinfo_R">
            <!-- <span
              v-if="
                personalData.wechatOpenId == null ||
                personalData.wechatOpenId == ''
              "
              >未绑定</span
            >-->
            <span>{{ personalData.wechatOpenId ? "已绑定" : "未绑定" }}</span>
            <img
              class="changeHanld"
              src="../../../../static/image/userInfo/userEdit.png"
              alt
              @click="bound = true"
            />
            <el-dialog
              :visible.sync="bound"
              :show-close="true"
              width="270px"
              center
              title="扫一扫"
              :close-on-click-modal="false"
            >
              <bound @isControlWeChat="ControlWeChat" />
            </el-dialog>
          </div>
        </div>
        <div class="info_bar">
          <div class="userinfo_L">邮箱订阅</div>
          <div class="userinfo_R">
            <span v-if="personalData.email == null || personalData.email == ''">订阅</span>
            <span v-else>{{ personalData.email }}</span>
            <img
              class="changeHanld"
              src="../../../../static/image/userInfo/userEdit.png"
              @click="changeEmail = true"
            />
          </div>
          <el-dialog
            :visible.sync="changeEmail"
            :show-close="true"
            width="270px"
            padding="-10px -10px"
            center
            title="更改邮箱"
          >
            <changeEmail @controlSendFrom="isControlSendFrom" />
          </el-dialog>
        </div>
        <div class="info_bar">
          <div class="userinfo_L">密码</div>
          <div class="userinfo_R">
            <span>**********</span>
            <img
              class="changeHanld"
              src="../../../../static/image/userInfo/userEdit.png"
              alt
              @click="xgmm()"
              :close-on-click-modal="false"
            />
          </div>
          <el-dialog
            :visible.sync="changepassword"
            :show-close="true"
            width="30%"
            center
            title="修改密码"
          >
            <changepassword
              @ControlPasswordBorder="isPassBorder"
              :isCode="personalData.whetherNeedOldCipherCode"
              ref="whetherNeedOldCipherCodes"
            />
          </el-dialog>
        </div>
      </div>
    </div>

    <div class="Representative">
      <h3>会员服务</h3>
      <div class="Representative_wrapper">
        <div class="represenTative_item">
          <div class="Representative_L">
            <span>会员类型</span>
          </div>
          <div class="Representative_R">
            <span>{{ userService.gradeName }}</span>
            <div class="upgrade changeHanld" @click="tmpPage">升级</div>
          </div>
        </div>
        <div class="represenTative_item">
          <div class="Representative_L">
            <span>到期时间</span>
          </div>
          <div class="Representative_R">
            <span>
              {{
              userService.expireTime == null ? "无限期" : `${userService.expireTime}到期`
              }}
            </span>
            <div class="upgrade changeHanld" @click="tmpPage">续费</div>
          </div>
        </div>
        <div class="represenTative_item">
          <div class="Representative_L">
            <span>可关注部门</span>
          </div>
          <div class="Representative_R">
            <span v-if="userService.gradeAttentionDepartmentTotal == null">无限次</span>
            <template v-else>
              <span>总 {{ userService.gradeAttentionDepartmentTotal }} 个</span>
              <span>剩余 {{ userService.surplusAttentionDepartmentTotal }} 个</span>
              <div class="upgrades changeHanld" @click="tmpPage">可升级无限次</div>
            </template>
          </div>
        </div>
        <div class="represenTative_item">
          <div class="Representative_L">
            <span>可关注企业</span>
          </div>
          <div class="Representative_R">
            <span v-if="userService.gradeAttentionCompanyTotal == null">无限次</span>
            <template v-else>
              <span>总 {{ userService.gradeAttentionCompanyTotal }} 个</span>
              <span>剩余 {{ userService.surplusAttentionCompanyTotal }} 个</span>
              <div class="upgrades changeHanld">可升级无限次</div>
            </template>
          </div>
        </div>
        <div class="represenTative_item">
          <div class="Representative_L">
            <span>企业项目信息查询</span>
          </div>
          <div class="Representative_R">
            <span v-if="userService.gradeProjectQueryTotal == null">无限次</span>
            <template v-else>
              <span>总 {{ userService.gradeProjectQueryTotal }} 次</span>
              <span>剩余 {{ userService.surplusProjectQueryTotal }} 次</span>
              <div class="upgrades changeHanld">可升级无限次</div>
            </template>
          </div>
        </div>
        <div class="represenTative_item">
          <div class="Representative_L">
            <span>企业对比</span>
          </div>
          <div class="Representative_R">
            <span v-if="userService.gradeCompanyContrastTotal == null">无限次</span>
            <template v-else>
              <span>总 {{ userService.gradeCompanyContrastTotal }} 次</span>
              <span>剩余 {{ userService.surplusCompanyContrastTotal }} 次</span>
              <div class="upgrades changeHanld">可升级无限次</div>
            </template>
          </div>
        </div>
        <div class="represenTative_item">
          <div class="Representative_L">
            <span>数据导出</span>
          </div>
          <div class="Representative_R">
            <span v-if="userService.downloadTotal == null">无限次</span>
            <template v-else>
              <span>总 {{ userService.downloadTotal }} 次</span>
              <span>剩余 {{ userService.surplusDownloadTotal }} 次</span>
              <div class="upgrades">可升级无限次</div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//修改昵称
import editUser from "../../../components/VIP/userEdit/editInfo.vue";
// 修改手机号码
import editmobile from "../../../components/VIP/userEdit/editmobile.vue";
import changepassword from "../../../components/VIP/userEdit/changepassword.vue"; // 修改密码
import changeEmail from "../../../components/VIP/userEdit/changeEmail.vue"; // 修改邮箱
import bound from "../../../components/VIP/userEdit/bound.vue"; // 微信扫码
import changeImg from "../../../components/VIP/userEdit/changeImg.vue"; // 头像上传
import {
  commonRequest,
  imgBaseUrl,
  postRequest,
  postRequestSplicing
} from "../../../api/api.js";

export default {
  components: {
    editUser,
    editmobile,
    changeEmail,
    changepassword,
    bound,
    changeImg
  },
  data() {
    return {
      userService: {},
      isShow: false, // 修改昵称
      editmobile: false, // 修改手机
      changeEmail: false, // 修改邮箱
      changepassword: false, // 修改密码
      bound: false, // 微信扫码
      photoShow: false, // 头像上传
      noDisplay: false,
      personalData: "", //
      radio: "0", //修改性别的数据
      options: [
        {
          value: "1",
          label: "企业主"
        },
        {
          value: "2",
          label: "服务机构"
        },
        {
          value: "3",
          label: "其他"
        }
      ],
      value: "1",
      showIdentity: false,
      photoUrl: ""
    };
  },
  mounted() {
    this.getUserInfo();
    this.getUserService();
  },
  methods: {
    getUserHeadPortrait(url) {
      this.photoUrl = url.indexOf("http") != -1 ? url : imgBaseUrl + url;
    },
    // 跳转vip页
    tmpPage() {
      window.open("/pageVIP", "_blank");
    },
    // 获取用户服务
    getUserService() {
      commonRequest("/api/ums/umsUsers/getMemberServiceInfo").then(res => {
        // console.log(res);
        this.userService = res;
      });
    },
    setAvatar(url) {
      this.personalData.avatar = url;
      this.$store.state.userInfo.avatar = url;
    },
    getUserInfo() {
      commonRequest("/api/userInfo").then(res => {
        this.personalData = res.result;
        this.getUserHeadPortrait(this.personalData.avatar);
      });
    },
    // 修改密码
    xgmm() {
      var that = this;
      that.changepassword = true;
      // console.log(this.personalData.whetherNeedOldCipherCode);
      var time = setInterval(() => {
        if (that.$refs.whetherNeedOldCipherCodes != undefined) {
          clearInterval(time);
          that.$refs.whetherNeedOldCipherCodes.vlaueJs(
            that.personalData.whetherNeedOldCipherCode
          );
        }
      }, 10);
    },
    // 控制用户上传图片
    controlImg(val) {
      // console.log(val);
      this.photoShow = val;
    },
    // 控制手机是否显示
    isMobileShow(numberCode) {
      // 修改手机号码
      this.editmobile = false;
    },
    // 控制是否显示微信弹框
    ControlWeChat(val) {
      this.bound = val;
    },
    // 控制是否显示邮箱框
    isControlSendFrom(val) {
      var that = this;
      postRequestSplicing(
        "/api/ums/umsUsers/updateEmail",
        "newEmail=" + val
      ).then(res => {
        if (res.success) {
          that.$message.success({
            message: "修改成功",
            type: "success"
          });
          that.personalData.email = val;
        } else {
          that.$message.error("修改失败");
        }
        that.changeEmail = false;
      });
    },
    //控制是否显示密码框
    isPassBorder(val1, val2) {
      var that = this;
      postRequestSplicing(
        "/api/ums/umsUsers/updatePassWord",
        `oldPassWord=${val1}&newPassWord=${val2}`
      ).then(res => {
        if (res.success) {
          that.$message.success({
            message: "修改成功",
            type: "success"
          });
          that.personalData.whetherNeedOldCipherCode = 0;
          that.personalData.password = val2;
          that.changepassword = false;
        } else {
          that.$message.error(res.message);
        }
      });
    },
    // 控制是否显示用户名
    showCintrolNick(val) {
      var that = this;
      postRequestSplicing(
        "/api/ums/umsUsers/updateNickName",
        "newNickName=" + val
      ).then(res => {
        if (res.success) {
          that.$message.success({
            message: "修改成功",
            type: "success"
          });
          that.personalData.nickName = val;
        } else {
          that.$message.error("修改失败");
        }
        that.isShow = false;
      });
    },
    // 改变性别
    getSex(val) {
      postRequestSplicing("/api/ums/umsUsers/updateSex", "sex=" + val).then(
        res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功"
            });
          } else {
            this.$message({
              type: "warning",
              message: "修改失败"
            });
          }
          this.getUserInfo();
          this.noDisplay = false;
        }
      );
    },
    // 改变身份
    changeOption() {
      postRequest(
        "/api/ums/umsUsers/updateIdentity?identity=" + this.value
      ).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "修改成功"
          });
        } else {
          this.$mesage({
            type: "warning",
            message: "修改失败"
          });
        }
        this.getUserInfo();
        this.showIdentity = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user_right {
  display: flex;
  width: 100%;
  justify-content: space-between;
  .userpage {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    h3 {
      height: 80px;
      display: flex;
      align-items: center;
      color: #999;
      font-size: 20px;
    }
  }

  .userinfo_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    // padding: 40px 0;
    // width: 900px;
    // height: 620px;
    background-color: #fff;

    .info_bar {
      display: flex;
      align-items: center;
    }

    .userinfo_L {
      width: 100px;
      padding-left: 20px;
      font-size: 14px;
      color: #333;
    }

    .userinfo_R {
      display: flex;
      align-items: center;
      margin-left: 40px;
      min-height: 60px;

      .userImage {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .userICON {
        border-radius: 50%;
        width: 70px;
        height: 70px;
        margin-right: 20px;
      }

      .change {
        color: #44a2ff;
        font-size: 14px;
      }

      span {
        font-size: 14px;
        margin-right: 20px;
        color: #333;
      }

      img {
        width: 12px;
        height: 15px;
      }

      label {
        margin: 0 20px;
        display: flex;
        align-items: center;
      }

      select {
        padding: 5px 3px;
        background-color: #f9fbff;
        outline: none;
        width: 220px;
        font-size: 14px;
        color: #333;
      }
    }

    .changeSex {
      display: flex;
      align-items: center;
      margin-left: 40px;
      min-height: 60px;

      img {
        width: 12px;
        height: 15px;
        margin-left: 15px;
      }
    }
  }

  .Representative {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    border-left: 1px solid #ccc;
    h3 {
      height: 80px;
      display: flex;
      align-items: center;
      color: #999;
      font-size: 20px;
    }

    .Representative_wrapper {
      justify-content: center;
      display: flex;
      flex-direction: column;
      // width: 900px;
      // height: 520px;
      background-color: #fff;

      .represenTative_item {
        display: flex;
        align-items: center;
        min-height: 60px;

        .Representative_L {
          display: flex;
          // align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-right: 80px;
          width: 120px;
          height: 100%;

          span {
            text-align: right;
            font-size: 14px;
            color: #333;
          }
        }

        .Representative_R {
          display: flex;

          span {
            margin: 0 10px;
            font-size: 14px;
          }

          .upgrade {
            color: #44a2ff;
            margin-left: 10px;
          }

          .upgrades {
            color: #dddddd;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .discount {
    .discount_title {
      height: 80px;
      display: flex;
      align-items: center;

      h3 {
        font-size: 20px;
        color: #999;
      }
    }

    .discount_content {
      height: 180px;
      width: 900px;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;

      img {
        width: 260px;
        height: 110px;
      }
    }
  }

  .el-radio-group {
    display: flex;
  }
}
</style>
